<template>
	<view class="wrapper">
		<view class="search">
			<uni-search-bar @confirm="search" @input="input" cancelButton="none" placeholder="输入股票名称/代码"></uni-search-bar>
		</view>
		<view class="ctype-wrapper">
			<view class="ctype-type-li active">近1月</view>
			<view class="ctype-type-li">近3月</view>
			<view class="ctype-type-li">近半年</view>
			<view class="ctype-type-li">自定义</view>
		</view>
		<view class="action-wrapper">
			<view class="action-li">
				<view class="name">股票/市值</view>
				<image src="../../static/analysis/analysis/icon6.png" class="label-ud"  mode=""></image>
			</view>
			<view class="action-li">
				<view class="name">可用/持仓</view>
			</view>
			<view class="action-li">
				<view class="name">成本/现价</view>
			</view>
			<view class="action-li">
				<view class="name">持仓盈亏</view>
			</view>
		</view>
		<view class="list">
			<!-- <view class="marketlist">
				<view class="marketlist-li">
					<view class="info1">
						<view class="name">上证指数</view>
						<view class="number">1A001</view>
					</view>
					<view class="info2">2806.09</view>
					<view class="info2">-24.44</view>
					<view class="info3 redtext">-0.86%</view>
				</view>
				<view class="marketlist-li">
					<view class="info1">
						<view class="name">上证指数</view>
						<view class="number">1A001</view>
					</view>
					<view class="info2">2806.09</view>
					<view class="info2">-24.44</view>
					<view class="info3 redtext">-0.86%</view>
				</view>
				<view class="marketlist-li">
					<view class="info1">
						<view class="name">上证指数</view>
						<view class="number">1A001</view>
					</view>
					<view class="info2">2806.09</view>
					<view class="info2">-24.44</view>
					<view class="info3 redtext">-0.86%</view>
				</view>
				<view class="marketlist-li">
					<view class="info1">
						<view class="name">上证指数</view>
						<view class="number">1A001</view>
					</view>
					<view class="info2">2806.09</view>
					<view class="info2">-24.44</view>
					<view class="info3 redtext">-0.86%</view>
				</view>
			</view> -->
			<view class="empty">
				<image src="../../static/trade/blocktrading/empty.png" mode=""></image>
				<view class="label">~暂无数据~</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}
	.search{
		padding: 0 23rpx;
	}
	.ctype-wrapper{
		padding: 0 33rpx;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
		.ctype-type-li{
			font-size: 28rpx;
			color: #999999;
			position: relative;
		}
		.active:after{
			content: '';
			width: 32rpx;
			height: 5rpx;
			background: #08377D;
			border-radius: 3rpx;
			position: absolute;
			left: 50%;
			margin-left: -16rpx;
			bottom: 0rpx;
			
		}
	}
	.action-wrapper{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #E5E5E5;
		border-top: 1rpx solid #E5E5E5;
		padding: 0 33rpx;
		.action-li{
			height: 71rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			
			image{
				height: 23rpx;
				width: 23rpx;
				margin-right: 10rpx;
			}
			.label-ud{
				height: 19rpx;
				width: 13rpx;
				margin-left: 10rpx;
			}
		}
	}
	.list{
		.marketlist {
			.marketlist-li {
				padding: 0 33rpx;
				height: 104rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #E5E5E5;
		
				.info1 {
					width: 20%;
					text-align: left;
		
					.name {
						font-weight: bold;
						font-size: 24rpx;
						line-height: 36rpx;
					}
		
					.number {
						font-weight: bold;
						font-size: 24rpx;
						line-height: 36rpx;
					}
				}
				
				.info2{
					text-align: left;
				}
				.info3{
					text-align: left;
				}
		
			}
		}
	}
	.empty {
		width: 244rpx;
		height: 113rpx;
		margin: 100rpx auto;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>